<%@ page import="pojo.Student" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: 33503
  Date: 2023/11/28
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>新增课程</title>
  <!--引入jquery和bootstrap -->
  <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <style>
    .teacher-box {
      color: black;
      margin-left: 230px;
      margin-top: 25px;
      border-radius: 10px
    }

    .in-teacher-box {
      background: #83ceed;
      box-shadow: 4px 4px 4px 4px #66c3ec;
      padding: 10px;
      margin: 30px;
      width: 90%;
      font-size: 20px;
      border-radius: 15px
    }

    .in-teacher-box input {
      font-size: 20px;
    }

    th {
      border: 2px solid #66afe9;
      background-color: #428bca;
      height: 40px;
      color: white;
    }

    td {
      border: 2px solid #66afe9;
      text-align: center;
      padding: 15px 0;
      /*background-color: #66afe9;*/
      height: 40px;
      width: 20%;
      font-size: 20px;
      color: white;
    }

    input::-webkit-input-placeholder {
      font-size: 15px;
    }

    #table th {
      text-align: center;
    }

    .add_courseName {
      height: 30px;
      width: 10%;
      background-color: #5cb85c;
      border-color: #2e6da4;
      border-radius: 5px;
      font-size: large;
      color: white;
      margin-left: 20px;
    }

    .add_course_student {
      height: 30px;
      width: 10%;
      background-color: #5cb85c;
      border-color: #2e6da4;
      border-radius: 5px;
      font-size: large;
      color: white;
      margin-left: 20px;
    }
  </style>
</head>
<body>
<%--菜单栏--%>
<jsp:include page="teacher_menu.jsp"></jsp:include>
<div align="center" class="teacher-box">
  <div style="font-size: 30px">新增课程</div>
  <a href="courseList.jsp"
     style="display: inline-block; background-color: #66afe9; font-size: 15px; float: left;color: black"><strong><</strong>返回上一级</a>
  <div align="left" class="in-teacher-box">
    <div style="padding-left: 250px">
      课程名称：<input type="text" name="c_name" id="courseName" placeholder="请先输入课程名称，点击确认——>">
      <input type="submit" value="确认" class="add_courseName" >
      <br><br>
      添加学生（请在下表中勾选）<input type="button" class="add_course_student" onclick="submitStus()" value="确认">
      <br><br>
    </div>
    <div style="display: flex; padding-left: 15%;">
      <form style="padding-left: 15%; margin-right: 20px"
            action="${pageContext.request.contextPath }/findCourseStudentByStudentId"
            method="POST" id="xsForm">
        <input class="my-input" type="text" name="s_id" id="s_id" placeholder="请输入学生学号"
               aria-label="Search">
        <input class="btn btn-primary search_btn" type="submit" value="查询">
      </form>
      <%--所有--%>
      <form action="${pageContext.request.contextPath }/loadCourseStudentList"
            method="POST">
        <input type="submit" value="所有" class="btn btn-primary search_btn" >
      </form>
    </div>
    <table id="table" style="font-size: 20px;margin-left: 25%">
      <thead>
      <tr>
        <th>勾选</th>
        <th>学号</th>
        <th>姓名</th>
        <th>班级</th>
      </tr>
      </thead>
      <tbody>
      <!--展示学生信息-->
      <%
        List<Student> students = (List<Student>) session.getAttribute("get_courseStudents");
        if (students == null || students.isEmpty()) {
      %>
      <tr>
        <td colspan="4" style="text-align: center">数据为空</td>
      </tr>
      <%
      } else {
        for (Student s : students) {
      %>
      <tr>
        <td><input type="checkbox" class="check-border" name="check" onchange="num()" value="<%=s.getS_id()%>"></td>
        <td><%=s.getS_id()%>
        </td>
        <td><%=s.getS_name()%>
        </td>
        <td><%=s.getS_class()%>
        </td>
      </tr>
      <%
          }
        }
      %>
      <tr>
        <td colspan="4"><input type="checkbox" class="check-border" id="checkAll" onchange="check_All()">全选
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          已选中[<span id="number"></span>]个
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
<script>
  function myTrim(x) {
    return x.replace(/^\s+|\s+$/gm,'');}
  function idjianyan(){
    var id=myTrim($("#s_id").val());//获取学生学号消除空格
    if(id===""||id==null){
      alert("要查询的学号不能为空")
    }else{
      $("#xsForm").submit();
      return false;
    }
  }
  $(function () {
    $(".add_courseName").click(function () {
      var name3=myTrim($("#courseName").val());//获取要新增的课程名称消除空格
      if(name3===""||name3==null){
        alert("课程名称不能为空")
      }
      else{
        $.ajax({//传数据给controller获取课程名称
          type: "post",
          url: "${pageContext.request.contextPath}/acquireNewClassName",
          data: {
            "name3": name3
          },
          success: function (data) {
            console.log(data);//在控制台输出信息。
            if (data == false) {
              alert("该课程已存在！")
            } else {
              alert("课程名称录入成功！请从下表中勾选学生加入课程！")
            }
          }
        });
      }

    })
    // 全选 or 全取消
    $('#checkAll').click(function (event) {
      var tr_checkbox = $('table tbody tr').find('input[type=checkbox]');
      tr_checkbox.prop('checked', $(this).prop('checked'));
      num();
      // 阻止向上冒泡，以防再次触发点击操作
      event.stopPropagation();
    });

    // 点击表格每一行的checkbox，表格所有选中的checkbox数 = 表格行数时，则将表头的‘checkAll’单选框置为选中，否则置为未选中
    $('table tbody tr').find('input[type=checkbox]').click(function (event) {
      var tbr = $('table tbody tr');
      $('#checkAll').prop('checked', tbr.find('input[type=checkbox]:checked').length == tbr.length ? true : false);
      // 阻止向上冒泡，以防再次触发点击操作
      event.stopPropagation();
    });

    // 点击表格行(行内任意位置)，触发选中或取消选中该行的checkbox
    $('table tbody tr').click(function () {
      $(this).find('input[type=checkbox]').click();
    });
  });
  function getIds(){
    var str="";
    $("input[name='check']").each(function(){
      if($(this).prop("checked")==true){
        str+=($(this).val()+",")
      }
    });
    return str;
  }
  <%--点击添加勾选的学生的确定按钮后触发后台操作--%>
  function submitStus(){
    var params={
      check: getIds(),
    }
    $.ajax({
      url: "${pageContext.request.contextPath}/addCourse",
      contentType: 'application/json',
      data: JSON.stringify(params),
      type: "POST",
      success: function (data) {
        if(data==false){
          alert("添加学生失败")
        }else{
          alert("添加学生成功")
          window.location.href="${pageContext.request.contextPath }/loadCourseList";
        }
      }
    })
  }

  <%--计数--%>
  function num() {
    //统计被选中数量
    var checknum = 0;
    var myck = document.getElementsByName("check");
    for (a = 0; a < myck.length; a++) {
      if (myck[a].checked) {
        checknum++;
      }
    }
    //将num这个值放在页面中
    $("#number").html(checknum);

    //完善自动全选按钮，当底下按钮全部选中，则全选按钮自动勾选
    if (checknum == myck.length) {
      document.getElementById("checkAll").checked = true;
    } else {
      document.getElementById("checkAll").checked = false;
    }
  }
</script>
</body>
</html>
